import React, { FC } from "react";
import { QuestionCheckboxDefaultValue, QuestionCheckboxType, listType } from "./tepy";
import { Typography, Space, Checkbox } from "antd";

const { Title } = Typography;
const QuestionCheckboxComponent: FC<QuestionCheckboxType> = (prop) => {
  const { title, list = [], isvertical } = { ...QuestionCheckboxDefaultValue, ...prop };
  return (
    <>
      <Title style={{ fontSize: "23px" }}>{title}</Title>
      <Space direction={isvertical ? "vertical" : "horizontal"}>
        {list.map((item: listType) => {
          const { text, value, checked } = item;
          return (
            <Checkbox checked={checked} key={value} value={value}>
              {text}
            </Checkbox>
          );
        })}
      </Space>
    </>
  );
};

export default QuestionCheckboxComponent;
